<template>
  <el-select-v2
    v-model="model"
    filterable
    clearable
    :options="leaderMap"
    :disabled="disabled"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <template #default="{ item }">
      <div class="flex justify-between items-center">
        <span>{{ item.label }}</span>
      </div>
    </template>
    <template #label>
      <div class="flex justify-between items-center">
        <span>{{ currentItem.label }}</span>
      </div>
    </template>
  </el-select-v2>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElSelectV2 } from 'element-plus'
import useLeaderStore from '@/stores/leader'

const {
  assignLeaders,
  disabled = false,
  placeholder = '请选择领导',
} = defineProps<{
  assignLeaders?: boolean
  disabled?: boolean
  placeholder?: string
}>()

const model = defineModel()
const emit = defineEmits(['change'])
const leaderStore = useLeaderStore()

const currentItem = computed(() => {
  return (
    leaderMap.value.find((item) => item.value === model.value) || {
      label: '',
      leaderType: '',
    }
  )
})

const leaderMap = computed(() => {
  return leaderList.value.map((item) => {
    return {
      value: item.userId,
      label: item.userName,
      leaderType: item.leaderType,
      assignLeaders: item.assignLeaders,
    }
  })
})

const leaderList = computed(() => {
  // if (leaderType === '1') {
  //   return leaderStore.list.filter((item) => {
  //     return item.leaderType === '1'
  //   })
  // } else if (leaderType === '2') {
  //   return leaderStore.list.filter((item) => {
  //     return item.leaderType === '2'
  //   })
  // } else {
  //   return leaderStore.list
  // }
  if (assignLeaders) {
    return (
      leaderStore.list.filter((item) => {
        return item.assignLeaders === 1
      }) || []
    )
  } else {
    return leaderStore.list
  }
})

function handleChange(value: any) {
  emit('change', value)
}
</script>

<style scoped lang="scss"></style>
